<template>
  <div>
    <van-nav-bar title="消息" left-text="返回" right-text="..." left-arrow @click-left="onClickLeft" fixed />
    <div class="chart-list" id="chart-list">
      <div class="user-message">1111</div>
    </div>
    <div>
      <div class="message"><textarea id="textarea"></textarea></div>
      <button id="btn" @click="get">发送</button>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" >标签</van-tabbar-item>
      <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {}
</script>
<script src="../index.js"></script>
<script src="../socket.io.js"></script>
<script>
let socket = io('https://localhost:5000')
console.log(socket)

  // 接收服务端发回来的消息
  socket.on('textmsg', function (data) {
    let list = document.getElementsById('chart-list')
    list.innerHTML += `<div class="user-message">${data}</div>`
  })
  socket.on('textmsg2', function (data) {
    let list = document.getElementsById('chart-list')
    list.innerHTML += `<div class="user-message">${data}</div>`
  })
</script>
<script>
  export default {
      methods:{
          onClickLeft(){
              this.$router.go('-1')
          }
      },
    //   let val=textarea.value
    //   let keepAlive=$route.meta.keepAlive

    //   btn.click=function(){
    //       socket.emit('textmsg',{
    //           text:val,keepAlive
    //       })
    //   },

  }
  socket.on('textmsg', function (data) {
  let list = document.getElementsById('chart-list')
  list.innerHTML += `<div class="user-message">${data}</div>`
})
socket.on('textmsg2', function (data) {
  let list = document.getElementsById('chart-list')
  list.innerHTML += `<div class="user-message">${data}</div>`
})
</script>
<script>
export default {
  methods: {
    onClickLeft() {
      this.$router.go('-1')
    },
    get() {
      let val = textarea.value
      let keepAlive = $route.meta.keepAlive
      socket.emit('textmsg', {
        text: val,
        keepAlive,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.message {
  border: 10px solid black;
  width: 200px;
  height: 100%;
}
</style>
